
import { FullscreenOutlined, FullscreenExitOutlined } from '@ant-design/icons';
import { useState } from 'react';
import { useEffect } from 'react';



const FullScreen = (props) => {
    const {
        size,
        containId,
    } = props;

    useEffect(() => {
        window.onresize = function () {
            if(checkFull()){
                setFullScreen(true);
            } else {
                setFullScreen(false);
            }
        }
    }, [])

    const [isFullScreen, setFullScreen] = useState(false);

    const checkFull = () => {
        var isFull = document.fullscreenEnabled && ( window.fullScreen || document.webkitIsFullScreen || document.msFullscreenEnabled );
        //to fix : false || undefined == undefined
        if (isFull === undefined) { isFull = false; }
        return isFull;
    }
    console.log(containId);
    const fullScreen = () => {
        var dom = document.getElementById(containId);//绑定想要全屏的组件
        if (dom.requestFullscreen) {
            console.log('requestFullscreen')
            dom.requestFullscreen();
        } else if (dom.mozRequestFullScreen) {
            console.log('mozRequestFullScreen')
            dom.mozRequestFullScreen();
        } else if (dom.webkitRequestFullScreen) {
            console.log('webkitRequestFullScreen')
            dom.webkitRequestFullScreen();
        }
    }

    const exitFullscreen = () => {
        var dom = document;
        if (dom.exitFullscreen) {
            console.log('exitFullscreen')
            dom.exitFullscreen();
        } else if (dom.mozCancelFullScreen) {
            console.log('mozCancelFullScreen')
            dom.mozCancelFullScreen();
        } else if (dom.webkitCancelFullScreen) {
            console.log('webkitCancelFullScreen')
            dom.webkitCancelFullScreen();
        }
        
    };
    return (<div>
        {isFullScreen ? <FullscreenExitOutlined size={size} onClick={exitFullscreen} /> :
            <FullscreenOutlined size={size} onClick={fullScreen} />}
    </div>);
}

export default FullScreen;
